<template>
	<view class="wrap">
		<view class="main">
			<view class="container">
				<!-- 轮播 -->
				<view class="id-swiper">
					<u-swiper :list="banners" keyName="image" borderRadius="4" indicator indicatorMode="line" circular height="265"></u-swiper>
				</view>
				<u-gap height="50"></u-gap>
				<view class="box">
					<view class="inner">
						<view class="item" @click="navTo('announcement')">
							<view class="left">
								<image mode="aspectFill" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/home/news.png" />
							</view> 
							<view class="right">
								<view class="title">通知公告</view>
								<view class="desc">预约规则，来访须知，最新通知等</view>
							</view>
				
						</view>
						<view class="item" @click="navSwitch('apply')">
							<view class="left">
								<image mode="aspectFill" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/home/add.png" />
							</view> 
							<view class="right">
								<view class="title">申请来访</view>
								<view class="desc">提交来访日期时间，个人资料等</view>
							</view>
						</view>
						<view class="item" @click="navTo('visitingApplication', { type: '' })">
							<view class="left">
								<image mode="aspectFill" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/home/list.png" />
							</view> 
							<view class="right">
								<view class="title">我的申请</view>
								<view class="desc">随时查看我的申请记录和审批结果</view>
							</view>
						</view>
						<view class="item" @click="navSwitch('personal')">
							<view class="left">
								<image mode="aspectFill" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/home/my.png" />
							</view> 
							<view class="right">
								<view class="title">个人中心</view>
								<view class="desc">个人信息登记和变更</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<custom-footer :current="current" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				banners: [{
					image: 'https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/home/home.jpg',
				}],
				noticeList: [],
				menuList: [],
				countTime: 2000
			}
		},
		onLoad() {
			// #ifdef MP || H5
				// uni.setNavigationBarTitle({
				// 	title: `数据加载中...`
				// })
				// uni.showNavigationBarLoading()
			// #endif
			if (!this.$store.state.isLogin) {
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						// 请求登录
						const data = await this.$api.wxLoginCode({ code: res.code })
						this.isLogin = true;
						if (data.code == 0) {
							this.$store.commit('setUserInfo', data.data.currentUser);
							this.$store.commit('setToken', `Bearer ${data.data.token}`);
							this.deptList();
						}
						
					}
				})
			}
		},
		onNavigationBarButtonTap(e){
			if(e.index == 0){
				this.$Router.push({ name: 'newsList' })
			}
		},
		methods: {
			deptList() {
				this.$api.getDept({
					// parentId: 1
				}).then(res => {
					let data = res.data;
					this.$store.commit('setDept', data);
				})
			},
			onMenuchange(e) { //切换菜单
				typeof e == 'number' ? this.current = e : this.current = e.detail.current
			},
			getAnimation() { //欢迎语
				let title = ''
				var now = new Date(),
					hour = now.getHours()
				if (hour >= 1 && hour <= 5) {
					title = '凌晨好'
				} else if (hour >= 6 && hour <= 11) {
					title = '上午好'
				} else if (hour == 12) {
					title = '中午好'
				} else if (hour >= 13 && hour <= 18) {
					title = '下午好'
				} else if (hour >= 19 || hour == 0) {
					title = '晚上好'
				}
				uni.setNavigationBarTitle({
					title: `${title}, admin~`
				})
			},
			navTo(path, params) { //路由跳转
				this.$Router.push({ name: path, params })
			},
			navSwitch(path, params) {
				this.$Router.pushTab({ name: path, params })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7 !important;
	}

	.id-swiper {
		margin-top: -88rpx;
		.u-swiper-indicator {
			bottom: 90rpx;
		}

		.u-indicator-item-rect-active {
			border-radius: 4rpx;
		}
	}

	.id-menu {
		position: relative;
		
		.swiper{
			height: 330rpx;
		}
		
		.id-menu-icon {
			width: 64rpx;
			height: 64rpx;
		}

		.prev-btn,
		.next-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);

			image {
				width: 28rpx;
				height: 72rpx;
			}
		}

		.prev-btn {
			left: 0;
		}

		.next-btn {
			right: 0;
		}

		.indicator-dots {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			.indicator-dots-item {
				width: 24rpx;
				height: 6rpx;
				margin: 0 12rpx;
				background: #B2D9FF;
				border-radius: 4rpx;

				&.indicator-dots-active {
					background: #0080FF;
				}
			}
		}
	}

	.id-types {
		display: flex;
		flex-direction: row;
		padding: 30rpx 0 34rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx 0px rgba(0, 128, 255, 0.1);
		border-radius: 12rpx;
		position: relative;
		z-index: 99;
		margin: -10rpx 28rpx 0;// -76rpx 28rpx 0;

		.id-type-item {
			flex: 1;
			text-align: center;

			.id-type-icon {
				display: block;
				width: 64rpx;
				height: 64rpx;
				margin: 0 auto 10rpx;
			}

			.id-type-text {
				font-size: 28rpx;
			}
		}
	}

	.id-inform {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 26rpx 18rpx;
		margin: 30rpx 28rpx 0;
		background: #FFFFFF;
		border-radius: 12rpx;

		.notification-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.u-notice-bar-wrap {
			flex: 1;
		}

		.u-right-icon {
			color: #999999;
		}
	}

	.id-device {
		padding: 24rpx 24rpx 48rpx;
		background: #fff;
		margin: 0 28rpx;
		border-radius: 12rpx;

		.id-device-types {
			display: flex;

			.device-type-item {
				flex: 1;
				max-width: 200rpx;
				height: 160rpx;
				margin-right: 24rpx;
				padding: 36rpx 24rpx 0;

				&.item1 {
					background: url(https://gxmanager.oss-cn-shenzhen.aliyuncs.com/2021/1624167288557606.jpg);
					background-size: cover;
				}

				&.item2 {
					background: url(https://gxmanager.oss-cn-shenzhen.aliyuncs.com/2021/1624167342569929.jpg);
					background-size: cover;
				}

				&.item3 {
					background: url(https://gxmanager.oss-cn-shenzhen.aliyuncs.com/2021/1624167326590645.jpg);
					background-size: cover;
				}

				&:last-child {
					margin-right: 0;
				}

				.device-type-count {
					font-size: 48rpx;
					font-weight: 600;
				}

				.device-type-label {
					font-size: 24rpx;
				}
			}
		}
	}

	.device-status {
		display: flex;
		margin-top: 50rpx;

		.device-status-item {
			flex: 1;
			text-align: center;

			.device-status-count {
				font-size: 40rpx;
			}

			.device-status-label {
				margin-top: 13rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.box {
		width: 100%;
		padding: 70rpx 50rpx 20rpx;
		border-top-right-radius: 45rpx;
		border-top-left-radius: 45rpx;
		margin-top: -140rpx;
		position: relative;
		background-color: #F3F3FE;
	}
	
	.box .inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	.box .inner .item {
		width: 100%;
		margin-bottom: 40rpx;
		min-height: 200rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 30rpx;
		background-color: #fff;
		box-shadow: 5rpx 5rpx 20rpx 1rpx rgba(114, 130, 138, 0.1);
	}
	
	.box .inner .item .left {
		background-color: #E3F1FD;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.box .inner .item .left image {
		width: 70rpx;
		height: 70rpx;
	}
	
	.box .inner .item .right {
		flex: 1;
		flex-direction: column;
		margin-left: 40rpx;
	}
	
	.box .inner .item .right .title {
		font-size: 42rpx;
		font-weight: bold;
		color: #333;
	}
	
	.box .inner .item .right .desc {
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
	}
</style>
